<template>
  <el-form
    ref="formTpl"
    :model="formData"
    :rules="rules"
    :label-width="labelWidth"
    :disabled="disabledAll"
    class="form-tpl-contaier"
  >
    <el-row style="display:flex;flex-wrap:wrap;">
      <template v-for="formItem in renderList">
        <!-- 输入框 -->
        <el-col
          v-if="formItem.type === 'input' && !noShowProps.includes(formItem.prop)"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-input
              v-model="formData[formItem.prop]"
              :type="formItem.inputType"
              :placeholder="formItem.placeholder || '请输入'"
              :disabled="disabledProps.includes(formItem.prop) || formItem.disabled"
              :clearable="formItem.clearable || true"
              :rows="formItem.rows"
              :maxlength="formItem.maxlength "
              :show-password="formItem.showPassword || false"
              @change="emitChange(formItem.change, formData[ formItem.prop ])"
            />
          </el-form-item>
        </el-col>
        <!-- 级联选择器 -->
        <el-col
          v-if="formItem.type === 'cascader' && !noShowProps.includes(formItem.prop)"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item
            :label="formItem.label"
            :prop="formItem.prop"
          >
            <el-cascader
              v-model="formData[formItem.prop]"
              :options="selOptions[formItem.prop]"
              :placeholder="formItem.placeholder"
              :disabled="formItem.disabled"
              collapse-tags
              filterable
              :show-all-levels="false"
              :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable : true"
              :props="formItem.typeProp || typeProp"
              @change="emitChange(formItem.change, formData[ formItem.prop ])"
            />
          </el-form-item>
        </el-col>
        <!-- 时间选择器 -->
        <el-col
          v-if="formItem.type==='date' && !noShowProps.includes( formItem.prop )"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item
            :prop="formItem.prop"
            :label="formItem.label"
          >
            <el-date-picker
              v-model="formData[formItem.prop]"
              :type="formItem.dateType"
              :clearable="formItem.hasOwnProperty('clearable') ? formItem.clearable : true"
              :disabled="formItem.disabled"
              :placeholder="formItem.placeholder || '请选择日期'"
              :start-placeholder="formItem.startpPlaceholder||'开始日期'"
              :end-placeholder="formItem.endPlaceholder||'结束日期'"
              :value-format="valueFormat(formItem.dateType)"
              :format="format(formItem.dateType)"
              @change="emitChange(formItem.change,formData[ formItem.prop ])"
            />
          </el-form-item>
        </el-col>
        <!-- 季度选择器 -->
        <el-col
          v-if="formItem.type==='season' && !noShowProps.includes( formItem.prop )"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item
            :prop="formItem.prop"
            :label="formItem.label"
          >
            <Season v-model="formData[ formItem.prop ]" :input-style="formItem.inputStyle" />
          </el-form-item>
        </el-col>
        <!-- 选择器 -->
        <el-col
          v-if="formItem.type==='select' && !noShowProps.includes( formItem.prop )"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item :label="formItem.label" :prop="formItem.prop">
            <el-select
              v-model="formData[ formItem.prop ]"
              :placeholder="formItem.placeholder || '请选择'+formItem.label"
              :disabled="disabledProps.includes(formItem.prop)"
              filterable
              :allow-create="formItem.allowCreate || false"
              collapse-tags
              :clearable="formItem.clearable || true"
              :multiple="formItem.multiple || false"
              @change="emitChange(formItem, formItem.change, formData[ formItem.prop ])"
            >
              <el-option
                v-for="(item,index) in selOptions[formItem.prop]"
                :key="item.label + item.value + index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 单选按钮 -->
        <el-col
          v-if="formItem.type === 'radio' && !noShowProps.includes(formItem.prop)"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item :label="formItem.label" :prop="formItem.prop" v-bind="formItem" v-on="formItem">
            <template v-for=" radioItem in radioOptions[ formItem.prop ] ">
              <el-radio
                :key="radioItem.label"
                v-model="formData[ formItem.prop ]"
                :label="radioItem.value"
                :disabled="disabledProps.includes(formItem.prop)"
                @change="emitChange(formItem.change, formData[ formItem.prop ])"
              >
                {{ radioItem.label }}
              </el-radio>
            </template>
          </el-form-item>
        </el-col>
        <!-- 多选框 ckeckbox -->
        <el-col
          v-if="formItem.type==='checkbox' && !noShowProps.includes( formItem.prop )"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item v-bind="formItem" :prop="formItem.prop" :label="formItem.label" :required="formItem.required" v-on="formItem">
            <el-checkbox-group v-model="formData[ formItem.prop ]" :disabled="disabledProps.includes(formItem.prop)" @change="emitChange(formItem.change, formData[ formItem.prop ])">
              <el-checkbox v-for="i in selOptions[formItem.prop]" :key="i.value" :label="i.value" :disabled="i.disabled">
                {{ i.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <!-- switch 开关 -->
        <el-col
          v-if="formItem.type==='switch' && !noShowProps.includes( formItem.prop )"
          :key="formItem.prop"
          :span="formItem.span || 12"
        >
          <el-form-item :prop="formItem.prop" :label="formItem.label">
            <el-switch
              v-model="formData[ formItem.prop ]"
              :disabled="disabledProps.includes(formItem.prop)"
              :active-value="formItem.activeValue"
              :inactive-value="formItem.inactiveValue"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="emitChange(formItem.change,formData[ formItem.prop ])"
            />
          </el-form-item>
        </el-col>
        <!-- 文件上传 -->
        <el-col v-if="formItem.type==='file' && !noShowProps.includes( formItem.prop )" :key="formItem.prop" :span="formItem.span || 12">
          <el-form-item v-bind="formItem" :prop="formItem.prop" :label="formItem.label" :required="formItem.required" v-on="formItem">
            <Upload
              v-model="formData[ formItem.prop ]"
              :file-type="formItem.fileType || ['jpg', 'png', 'pdf', 'jpeg']"
              :config="formItem.config ? {...formItem.config, disabled: disabledProps.includes(formItem.prop)} : { multiple: true,limit: 1, sizeLimitTip: false, disabled: disabledProps.includes(formItem.prop) }"
              :mark="formItem.mark"
            />
          </el-form-item>
        </el-col>
        <!-- 富文本编辑框 -->
        <el-col v-if="formItem.type==='richText'&& !noShowProps.includes( formItem.prop ) && showRichText" :key="formItem.prop" :span="formItem.span || 12">
          <el-form-item :class="{'disable':disabledProps.includes(formItem.prop)}" v-bind="formItem" :prop="formItem.prop" :label="formItem.label" :required="formItem.required" v-on="formItem">
            <Tinymce
              v-model="formData[formItem.prop ]"
              :show-upload-btn="formItem.showUploadBtn"
            />
          </el-form-item>
        </el-col>
        <!-- 插槽 -->
        <el-col v-if="formItem.slot && !noShowProps.includes( formItem.prop )" :key="formItem.prop" :span="formItem.span || 12">
          <el-form-item :prop="formItem.prop" :label="formItem.label" :required="formItem.required">
            <slot :name="formItem.type" :formItem="formItem" :formData="formData" />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script>
import Upload from './upload'
import Season from './season'
import Tinymce from '@/components/Tinymce1'
export default {
  name: 'FormTpl',
  components: { Upload, Season, Tinymce },
  props: {
    disabledAll: {
      type: Boolean,
      default: false
    },
    // 表单数据
    formData: {
      type: Object,
      default: () => ({})
    },
    // 列表渲染
    renderList: {
      type: Array,
      default () {
        return [
          /* 插槽用法*/
          // {
          //   type: 'slotInput', //  插槽类型
          //   slot: true, // 是否为插槽
          //   prop: 'text',
          //   span: 24,
          //   label: '测试文本',
          // },
          //  <template v-slot:slotInput="scopedProps">
          //   <el-input v-model="scopedProps.formData[ scopedProps.formItem.prop ]"></el-input>
          //  </template>
          // {
          //   type: 'input',
          //   prop: 'custCode',
          //   label: '客户编码',
          //   inputType: 'text',
          //   formatVal: val=>val.replace(/[^0-9]/g, ''), // 匹配输入框输入
          //   change (value) {}, // 调用事件
          //   clearable: false // 是否可以清除
          // },
          // {
          //   type: 'select',
          //   prop: 'credType',
          //   label: '证件类型',
          // },
          // {
          //   type: 'date',
          //   prop: 'createDate',
          //   label: '创建日期',
          // },
          // {
          //   type: 'radio',
          //   prop: 'sex',
          //   label: '性别',
          // },
          // {
          //   type: 'radio-input',
          //   radioProp: 'isActualControl',
          //   inputActiveValue: 1,
          //   inputProp: 'actualControl',
          //   inputPlaceholder: '实际控制关系',
          //   label: '是否存在实际控制关系',
          // },
          // {
          //   type: 'file',
          //   config: { multiple: true, limit: 5, sizeLimitTip: false },
          //   prop: 'certAttachmentFiles',
          //   label: '证件附件'
          // },
        ]
      }
    },
    // 禁用属性
    disabledProps: {
      type: Array,
      default: () => ([])
    },
    // 不展示的属性
    noShowProps: {
      type: Array,
      default: () => ([])
    },
    showRichText: {
      type: Boolean,
      default: true
    },
    // 渲染选择框的选项属性
    selOptions: {
      type: Object,
      default: () => ({})
    },
    // 渲染单选的选项属性
    radioOptions: {
      type: Object,
      default: () => ({})
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: () => ({})
    },
    labelWidth: {
      type: String,
      default: '160px'
    }
  },
  data () {
    return {
      typeProp: {
        label: 'label',
        value: 'value',
        children: 'children',
        multiple: true
      }
    }
  },
  computed: {
    valueFormat() {
      return (dateType) => {
        let value = ''
        if (['daterange',
          'date'].includes(dateType)) value = 'yyyyMMdd'
        if (dateType === 'year') value = 'yyyy'
        if (dateType === 'month') value = 'yyyyMM'
        if (['datetimerange',
          'datetime'].includes(dateType)) value = 'yyyyMMdd HHmmss' // datetimerange  datetime
        if (dateType === 'time') value = 'HHmmss'
        if (dateType === 'monthrange') value = 'yyyyMM'
        return value
      }
    },
    // 日期展示格式化
    format() {
      return (dateType) => {
        let value = ''
        if (['daterange',
          'date'].includes(dateType)) value = 'yyyy-MM-dd'
        if (dateType === 'year') value = 'yyyy'
        if (dateType === 'month') value = 'yyyy-MM'
        if (['datetimerange',
          'datetime'].includes(dateType)) value = 'yyyy-MM-dd HH:mm:ss'
        if (dateType === 'time') value = 'HH:mm:ss'
        if (dateType === 'monthrange') value = 'yyyy-MM'
        return value
      }
    }
  },
  methods: {
    // 全部校验
    validate () {
      return new Promise((resolve, reject) => {
        this.$refs.formTpl.validate(validate => {
          if (validate) {
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    validateField (fields = []) {
      return new Promise((resolve, reject) => {
        this.$refs.formTpl.validateField(fields, (err) => {
          if (err) {
            reject(err)
          } else {
            resolve()
          }
        })
      })
    },
    // 部分校验
    clearValidate () {
      this.$refs.formTpl.clearValidate()
    },
    // selChnage ({ prop }, event, value) {
    //   this.validateField([prop, ]) // 解决选择框 警告未正常消除的bug
    //   event && typeof event === 'function' && event(value, this.selOptions[prop].find(i => i.value === value))
    // },
    emitChange (event, value) {
      event && typeof event === 'function' && event(value)
    }
  }
}
</script>

